<template>
  <div class="pet_container">
    <!-- <pet-list-item-r></pet-list-item-r>
    <pet-list-item-l></pet-list-item-l>
    <pet-list-item-r></pet-list-item-r>
    <pet-list-item-l></pet-list-item-l> -->
    <div v-for="(v,i) in petList"
         :key="i">
      <div v-if="i % 2 == 0">
        <pet-list-item-l :toPet="petList[i]"
                         v-on:toUserId="toUserId"
                         v-on:toContactName="toContactName"></pet-list-item-l>
      </div>
      <div v-else>
        <pet-list-item-r :toPet="petList[i]"
                         v-on:toUserId="toUserId"
                         v-on:toContactName="toContactName"></pet-list-item-r>
      </div>
    </div>
  </div>
</template>
<script>
import getAllPetByCategoryId from '../../api/http'
export default {
  props: {
    toCategory: ''
  },
  created () {
    this.getAllPetByCategoryId(this.categoryId)
  },
  data () {
    return {
      petList: [],
      categoryId: this.toCategory
    }
  },
  methods: {
    // 根据分类id获取所有宠物信息
    async getAllPetByCategoryId (categoryId) {
      console.log(categoryId)
      // const { data: res } = await getAllPetByCategoryId(categoryId + '')
      const { data: res } = await this.$http.get('/pet/findPetByCategoryId/' + categoryId)
      if (res.code != 200)
        return;
      this.petList = res.data
    },
    // 获取到子组件的消息接收者id
    toUserId (userId) {
      console.log(userId)
      this.$emit('toUserId', userId);
    },
    toContactName (name) {
      console.log(name)
      this.$emit('toContactName', name);
    }
  },
  watch: {
    // 监听路由变化
    $route: {
      handler: function (val, oldVal) {
        this.getAllPetByCategoryId(this.categoryId)
      },
      // 深度观察监听
      deep: true
    }
  },

}
</script>
<style lang="less" scoped>
.hr_box {
  margin-left: 100px;
  margin-right: 100px;
  height: 1px;
  background-color: rgba(238, 130, 238, 0.795);
  border: 0;
}
</style>